<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/data-tables/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="customer">
        <div class="header_wrapper">
            <div class="title">客户统计</div>
            <div class="text">
                <span>成员可用企业微信添加客户的微信，并在这里与他们联系，企业可统一管理这些客户。</span>
            </div>
        </div>
        <div class="section_1">
            <div class="header">
                <span class="title">企业全部客户数</span>
                <div class="header_right_btn">
                    <div class="to_cus_list">
                        <span>查看客户列表</span>
                    </div>
                    <div class="to_member_total">
                        <span>查看成员客户统计</span>
                    </div>
                </div>
            </div>
            <div class="contaier">
                <div class="item">
                    <span class="num">5</span>
                    <span class="text">总人数</span>
                </div>
                <div class="item">
                    <span class="num">0</span>
                    <span class="text">今日新增</span>
                </div>
            </div>
        </div>
        <div class="section_2">
            <div class="text">日新增趋势</div>
            <div class="screen_wrapper">
                <div class="recent_time_wrapper">
                    <span class="text">最近时间：</span>
                    <div class="nav_tab">
                        <span class="tab_item active">1周</span>
                        <span class="tab_item">1个月</span>
                    </div>
                </div>
                <div class="date_wrapper">
                    <span class="text">自定义：</span>
                    <div class="date_input_wrapper">
                        <input class="layui-input" type="text" id="startDate" placeholder="开始日期">
                        <span class="text">至</span>
                        <input class="layui-input" type="text" id="endDate" placeholder="结束日期">
                    </div>
                </div>
            </div>
            <div class="kpi">
                <div id="section_2_kpi"></div>
            </div>
        </div>
    </div>

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/data-tables/jquery.dataTables.min.js"></script>
    <!-- chart -->
    <script src="../../js/highcharts/highcharts.js"></script>
    <script src="../../js/highcharts/exporting.js"></script>
    <script src="../../js/highcharts/no-data-to-display.js"></script>
    <script>
        // 获取当前日期
        function getDate() {
            var mydate = new Date();
            var str = "" + mydate.getFullYear() + "-";
            let month = "";
            let day = "";
            if (mydate.getMonth() < 10) {
                month = "0" + (mydate.getMonth() + 1);
            } else {
                month = mydate.getMonth() + 1;
            }
            if (mydate.getDate() < 10) {
                day = "0" + mydate.getDate();
            } else {
                day = mydate.getDate();
            }
            str += month + "-";
            str += day;
            return str;
        }
        // 昨天的日期
        function getPreDate(dayNum) {
            var day1 = new Date();
            day1.setTime(day1.getTime() - (dayNum || 1) * 24 * 60 * 60 * 1000);
            let month = "";
            let day = "";
            if (day1.getMonth() < 10) {
                month = "0" + (day1.getMonth() + 1);
            } else {
                month = day1.getMonth() + 1;
            }
            if (day1.getDate() < 10) {
                day = "0" + day1.getDate();
            } else {
                day = day1.getDate();
            }
            var s1 = day1.getFullYear() + "-" + month + "-" + day;
            return s1;
        }
        // 查看客户列表跳转
        $(".to_cus_list").click(function () {
            self.location.href = "customer-list.html?nav_index=3"
        })
        // 查看成员客户统计
        $(".to_member_total").click(function () {
            self.location.href = "customer-member-total-contact.html?nav_index=3"
        })
        var todayDate = getDate() // 当前日期
        var pre_7_day = getPreDate(7) // 前7天日期
        var pre_30_day = getPreDate(30) // 前30天日期
        var startDateSelected = pre_7_day // 开始日期 默认当天日期前7天
        var endDateSelected = todayDate // 结束日期 默认当天日期
        // 实例化表单
        layui.use('form', function () {
            var form = layui.form;
            layui.use('layer', function () {
                var layer = layui.layer

                // 店铺选择
                form.on('select(shopSelect)', function (data) {
                    let shopId = data.value // 选择的店铺shopid
                })
                // 客户姓名查询按钮
                form.on('submit(search_btn)', function (data) {
                    let cusName = data.field.cus_name
                    if (cusName == '') {
                        layer.msg('客户姓名不能为空')
                        return false
                    }
                    console.log(cusName)
                    return false

                })
                layui.use('laydate', function () {
                    var laydate = layui.laydate;
                    // 点击最近时间切换
                    $(".nav_tab").on('click', '.tab_item', function () {
                        $(this).addClass('active').siblings().removeClass('active')
                        if ($(this).text() == '1周') {
                            // 开始日期
                            let startDateValue = laydate.render({
                                elem: '#startDate', //指定元素
                                value: pre_7_day,
                                max: todayDate,
                                done: function (value, date) {
                                    startDateSelected = value;
                                }
                            });
                            // 结束日期
                            let endDateValue = laydate.render({
                                elem: '#endDate', //指定元素
                                value: todayDate,
                                max: todayDate,
                                done: function (value, date) {
                                    endDateSelected = value;
                                    startDateValue.config.max = {
                                        year: date.year,
                                        month: date.month - 1,
                                        date: date.date
                                    }
                                }
                            });

                            // KPI
                            // 日新增趋势
                            let mock_categories = ['1-30', '1-31', '2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7'];
                            let mock_series = [{
                                name: '日新增趋势',
                                data: [1, 0, 0, 0, 0, 0, 3, 0]
                            }];
                            section_2_kpi(mock_categories, mock_series);
                        } else if ($(this).text() == '1个月') {
                            // 开始日期
                            let startDateValue = laydate.render({
                                elem: '#startDate', //指定元素
                                value: pre_30_day,
                                max: todayDate,
                                done: function (value, date) {
                                    startDateSelected = value;
                                }
                            });
                            // 结束日期
                            let endDateValue = laydate.render({
                                elem: '#endDate', //指定元素
                                value: todayDate,
                                max: todayDate,
                                done: function (value, date) {
                                    endDateSelected = value;
                                    startDateValue.config.max = {
                                        year: date.year,
                                        month: date.month - 1,
                                        date: date.date
                                    }
                                }
                            });

                            // KPI
                            // 日新增趋势
                            let mock_categories = ['1-30', '1-31', '2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7'];
                            let mock_series = [{
                                name: '日新增趋势',
                                data: [1, 1, 0, 2, 5, 0, 3, 0]
                            }];
                            section_2_kpi(mock_categories, mock_series);
                        }
                    })
                    // 开始日期
                    let startDateValue = laydate.render({
                        elem: '#startDate', //指定元素
                        value: pre_7_day,
                        max: todayDate,
                        done: function (value, date) {
                            startDateSelected = value;
                            // 更新KPI
                            let mock_categories = ['1-30', '1-31', '2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7'];
                            let mock_series = [{
                                name: '日新增趋势',
                                data: [1, 1, 2, 1, 1, 1, 3, 0]
                            }];
                            section_2_kpi(mock_categories, mock_series);
                        }
                    });
                    // 结束日期
                    let endDateValue = laydate.render({
                        elem: '#endDate', //指定元素
                        value: todayDate,
                        max: todayDate,
                        done: function (value, date) {
                            endDateSelected = value;
                            startDateValue.config.max = {
                                year: date.year,
                                month: date.month - 1,
                                date: date.date
                            }
                            // 更新KPI
                            let mock_categories = ['1-30', '1-31', '2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7'];
                            let mock_series = [{
                                name: '日新增趋势',
                                data: [2, 0, 0, 2, 0, 0, 3, 0]
                            }];
                            section_2_kpi(mock_categories, mock_series);
                        }
                    });
                });

            })

        });
        // 日新增趋势
        let mock_categories = ['1-30', '1-31', '2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7'];
        let mock_series = [{
            name: '日新增趋势',
            data: [0, 0, 0, 0, 0, 0, 0, 0]
        }];
        function section_2_kpi(categories, series) {
            Highcharts.chart('section_2_kpi', {
                title: {
                    text: ''
                },
                exporting: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: categories
                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                    }
                },
                series: series
            })
        }
        // 默认KPI为一周的数据
        section_2_kpi(mock_categories, mock_series)

    </script>
</body>

</html>